{% extends 'PHPDishWebBundle::layout.html.twig' %}

{% block title %} {{ 'wallet.my_wallet'|trans }} {% endblock %}

{% block script %}
    <script type="text/javascript" src="{{ asset('build/js/wallet.js') }}"></script>
{% endblock %}

{% block content %}
<div class="container">
    {% from  'PHPDishWebBundle:Macros:notification.html.twig' import flashes %}
    {{ flashes() }}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-u">
                <div class="panel-body wallet-details">
                    <div class="row">
                        <div class="col-md-6 wallet-info" data-role="wallet-info">
                            <div class="balance">
                                {{ 'wallet.account_balance'|trans }}: <span class="amount" data-amount="{{ wallet.amount }}">{{ wallet.price|money }}</span>
                                {% if wallet.freezeAmount %}
                                <div class="freeze-balance">
                                    ({{ 'wallet.frozen_balance'|trans }}: <span class="amount">{{ wallet.freezePrice|money }}</span>)
                                </div>
                                {% endif %}
                            </div>
                            <button class="btn btn-md u-btn-outline-primary withdraw" data-role="withdraw">{{ 'wallet.withdraw'|trans }}</button>
                        </div>
                        <div class="col-md-6 help">
                            <div>{{ 'wallet.the_minimum_amount_for_each_withdrawal_is_100'|trans }}</div>
                            <div>{{ 'wallet.the_withdrawal_amount_must_be_an_integer'|trans }}</div>
                            <div>{{ 'wallet.10_percent_service_charge_is_charged_for_each_withdrawal'|trans }}</div>
                            <div>{{ 'wallet.withdrawal_will_arrive_within_3_5_working_days'|trans }}</div>
                            <div>{{ 'wallet.withdrawal_amount_will_be_temporarily_frozen_during_withdrawal'|trans }}</div>
                        </div>
                    </div>

                    <table class="table table-responsive wallet-histories">
                        <tr>
                            <th>{{ 'wallet.table.time'|trans }}</th>
                            <th>{{ 'wallet.table.type'|trans }}</th>
                            <th>{{ 'wallet.table.details'|trans }}</th>
                            <th>{{ 'wallet.table.amount'|trans }}</th>
                            <th>{{ 'wallet.table.status'|trans }}</th>
                        </tr>
                        {% for history in histories %}
                            <tr>
                                <td>{{ history.createdAt|time_diff }}</td>
                                <td>{{ history|wallet_history_type }}</td>
                                <td>{{ history.description|raw }}</td>
                                <td class="{%  if history.isIncome %}income{% else %}expenses{% endif %}">
                                {%  if history.isIncome %}+{% else %}-{% endif %}{{ history.price|money }}
                                </td>
                                <td>{{ history|wallet_history_status }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td class="empty-data" colspan="5">
                                    <i class="fa fa-credit-card"></i> {{ 'ui.no_record'|trans }}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                {% if histories.haveToPaginate  %}
                <footer class="panel-footer">
                    {% from 'PHPDishWebBundle:Macros:paginator.html.twig' import paginator %}
                    {{ paginator(histories) }}
                </footer>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}